<template>
  <a-modal
    title="订单详情"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="cancel"
  >
    <template slot="footer">
      <div class="footerBox">
        <GenerateProtocol :disabled="serviceStatement">
          <a-button type="primary" class="button" :disabled="serviceStatement">
            服务协议
          </a-button>
        </GenerateProtocol>
        <GenerateServiceDeclaration :disabled="serviceStatement">
          <a-button type="primary" class="button" :disabled="serviceStatement">
            服务声明
          </a-button>
        </GenerateServiceDeclaration>
        <a-button type="primary" class="button" @click="cancel">
          取 消
        </a-button>
      </div>
    </template>
    <div class="headCard">
      <div class="headCardText">
        <span>经销商名称：</span>
        <span>{{ mdl.dealerName || '' }}</span>
      </div>
      <div class="headCardText">
        <span>机构代码：</span>
        <span>{{ mdl.organCode }}</span>
      </div>
    </div>
    <a-form :form="form">
      <a-row>
        <a-col :md="24" >
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">基本信息</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">订单号：</span>
            <span class="dark">{{ mdl.orderId }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">服务合同号：</span>
            <span class="dark">{{ mdl.serviceContractNo }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">下单日期：</span>
            <span class="dark">{{ mdl.orderTime }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue"></div>
          <span class="lightColour">业务员姓名：</span>
          <span class="dark">{{ mdl.saleName }}</span>
        </a-col>
        <a-col :md="24" >
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">车辆信息</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆组别：</span>
            <span class="dark">{{ mdl.saleName }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆组别：</span>
            <span class="dark">{{ mdl.carType }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆品牌：</span>
            <span class="dark">{{ mdl.carBrand }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">品牌型号：</span>
            <span class="dark">{{ mdl.brandModel }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车主姓名：</span>
            <span class="dark">{{ mdl.carName }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">身份证号：</span>
            <span class="dark">{{ mdl.idCard }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">手机号：</span>
            <span class="dark">{{ mdl.iphone }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">服务权益人姓名：</span>
            <span class="dark">{{ mdl.serviceStakeholders }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车牌号/发动机号：</span>
            <span class="dark">{{ mdl.carNumber }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车架号：</span>
            <span class="dark">{{ mdl.vinNo }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车险承保公司：</span>
            <span class="dark">{{ mdl.insuranceCarriers }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆损失险保单号：</span>
            <span class="dark">{{ mdl.lossPolicy }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">保额：</span>
            <span class="dark">{{ mdl.insuredAmount }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">商业险起保日期：</span>
            <span class="dark">{{ mdl.insuranceStartdate }}</span>
          </div>
        </a-col>
        <a-col :md="24" >
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">项目承保信息：</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">投保方案：</span>
            <span class="dark">{{ mdl.insuranceScheme }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">保险费：</span>
            <span class="dark">{{ mdl.insurancePremium }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">赔偿限额：</span>
            <span class="dark">{{ mdl.compensationLimit }}</span>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { protocolData } from '@/api/system'
import GenerateProtocol from '../generateProtocol'
import GenerateServiceDeclaration from '../generateServiceDeclaration'
export default {
  name: 'SysBusinessInfoModal',
  props: {
  },
  components: {
    GenerateProtocol,
    GenerateServiceDeclaration
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 10 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 14 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      datePicker: '',
      serviceStatement: true,
      serviceAgreement: true
    }
  },
  methods: {
    async getStatus () {
      const res = await protocolData()
      const { serviceStatement, serviceAgreement } = res.data
      this.serviceStatement = serviceStatement
      this.serviceAgreement = serviceAgreement
    },
    edit (record) {
      this.mdl = Object.assign(record)
      this.visible = true
      this.serviceStatement = !(record.agreement * 1)
    },
    cancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-control{
    max-width: 180px;
    min-width: 140px;
  }
.headCard{
  height: 60px;
  padding: 12px;
  background: #BAE7FF;
  border: 1px solid #7dc4ea;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 23px;
}
.title{
  display: flex;
  .titleRece{
    width: 2px;
    height: 16px;
    background: #227FE6;
    margin-right: 8px;
  }
  .titleText{
    font-family: "PingFangSC-Semibold";
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
  }
}
.footerBox{
  display: flex;
  justify-content: center;
  padding: 0 30px 30px 30px;
}
/deep/ .ant-modal-footer{
  border: none;
}
.itemValue{
  margin: 9px 0;
.lightColour{
  font-family: "PingFangSC-Regular";
  font-size: 14px;
  color: #999999;
  text-align: right;
  font-weight: 400;
}
.dark{
  font-family: "PingFangSC-Regular";
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  line-height: 14px;
  font-weight: 400;
}
}
.button{
  width: 120px;
  height: 26px;
  border-radius: 4px;
  margin-right: 20px;
}
</style>
